検証: Next.js App Routerで、MSW使いたい

Motivation

ただ、対応中であるので、調査したい。

hr.icon

q: 以下みたいにしたいな開発フローがあるわけだけど、storybook側も、Next.jsが挟まる訳で、Mock Service Worker MSW利用可能なんかな？

想定開発フロー

コンポーネントカタログ: Open API→MSW→aspida →Next.js→Storybook

アプリ: Open API→MSW→aspida →Next.js

Open API から、api client も一緒に作る（aspida , etc）

hr.icon

実際の決定

2024/01においては、ベータ版の利用ハック的解決のコストが、Server component よりのアーキテクチャで出来るstorybook 上のテストと比較して、割に合わないので、mswの利用をやめた

フロー

Open API→(aspida)→(Next.js)→storybook

Open API→(aspida)→Next.js

※ 一時的な開発用APIがないことに対応したいだけなら、ただのJSON MockファイルやJSON Server使うのもありかもねとは思っている。

mock/

models/

users.json

articles.json

storybookファイルはこちらをimportして利用

db.json

modelsの値をimportして並べる。

JSON Server使う際に利用。

? ベータ版の利用ハック的解決のコストとは？

Storybook においてSuspence Reactを利用して、React Server Components RSCを無理やり利用している点があまり許容出来なかった。

実際のNext.js側の挙動とちがう。

Testがflakyになる可能性が高い

これはStorybookの話だから、若干誤解があるかも。別にMSWは悪くない。

Storybook でRSCテストしないんだったら、MSWのメリット半減するから、ごちゃごちゃ作業してまでいらないかなぐらいの気持ち

代替案として、componentをcontainer presentational patternにして、Storyにおいて、Fetchを利用しない方針で、プレゼンテーション部分のみテストする事にした。